<template>
	<view>

		<view class="result-container">
			<view class="result-item" v-for="(item, i) in resultsList" @click="handleItemClicked(item)">
				<image :src="item.imgUrl" mode="aspectFill"></image>
				<view class="result-item-title">
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				resultsList: [],
			}
		},
		methods: {
			async getData() {
				try {
					let data = await this.$http.get(this.BASEURL + 'anime/bangumi/updates')
					console.log("rawData:", data)
					let i=0
					data.data.forEach(e=>{
						e.updates.forEach(el=>{
							
							this.resultsList.push({
								imgUrl: el.cover_url,
								// score: e.score,
								title: el.title,
							})
						})
						
						
					})
					this.resultsList.length = 20
					// data = data.data[0].updates.map(e => {
					// 	return {
							
					// 		// url: e.url
					// 	}
					// })
					console.log(this.resultsList )
					// this.resultsList = data
				} catch (e) {
					console.log(e)
				}
			},
			handleItemClicked(val){
				let title = val.title.split(" ")
				uni.reLaunch({
				    url: '../search/search?val='+title[0]+'&auto=true'
				});
			}
		},
		created() {
			 uni.showLoading({
				 title: '加载中'
			 });
			this.getData();
			uni.hideLoading();
		}
	}
</script>

<style>
	.result-container {
		margin: 0 40rpx;

		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.result-item {
		width: 320rpx;
		height: 400rpx;
		background-color: #F2F6FC;
		border-radius: 10rpx;
		margin: 20rpx 0;
		overflow: hidden;
		text-align: center;
		line-height: 40rpx;

		display: flex;
		flex-direction: column;
	}

	.result-item>image {
		width: 100%;
		height: 280rpx;
	}

	.result-item-title {
		flex: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.noResult {
		font-size: 1.3em;
		margin: 40rpx 0;
		text-align: center;
	}
</style>
